<template>
  <div>
    <div id="pdf"></div>
  </div>
</template>

<script>
//import pdfjsLib from 'pdfjs-dist'
export default {
  data () {
    return {
      pdfUrl: 'your-pdf-url',
      currentPage: 1,
      rotation: 0,
      scale: 1
    };
  },
  methods: {
    loadPDF () {
      // 设置PDF文件路径
      const pdfPath = 'http://139.224.68.50:9017/file/6b3fa645126d46a9b54578341b9fed61.pdf';

      // 使用pdfjsLib加载PDF文件
      pdfjsLib.getDocument(pdfPath).promise.then(pdf => {
        // 获取第一页
        return pdf.getPage(1);
      }).then(page => {
        // 创建一个canvas元素来渲染PDF页面
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');

        // 获取页面的宽度和高度
        const viewport = page.getViewport({ scale: 1 });

        // 设置canvas的大小
        canvas.width = viewport.width;
        canvas.height = viewport.height;

        // 渲染PDF页面到canvas上
        page.render({
          canvasContext: context,
          viewport: viewport
        });

        // 将canvas添加到DOM中
        document.getElementById('pdf').appendChild(canvas);
        console.log(canvas)
        debugger
      });
    }
  },
  mounted () {
    console.log('pdf', pdfjsLib)
    this.loadPDF()
  }
};
</script>